import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import './workbenches.css'
import Pie from '../echarts/pie/pie';
import Curve from '../echarts/curve/curve';

const ProgressBar = ({ label, value, max }) => {
  const percentage = (value / max) * 100;
  return (
    <div className="progress-bar-container">
      <div className="progress-bar-label">{label}</div>
      <div className="progress-bar">
        <div className="progress" style={{ width: `${percentage}%` }}></div>
      </div>
      <div className="progress-bar-value">{value}</div>
    </div>
  );
};


export default function index() {
  let navigate = useNavigate();
  const data = [
    { label: '高血压', value: 80, max: 100 },
    { label: '冠心病', value: 120, max: 150 },
    { label: '高血糖', value: 40, max: 100 },
    { label: '高血脂', value: 30, max: 100 },
    { label: '慢病护理', value: 110, max: 150 },
    { label: '多动症', value: 88, max: 100 },
  ];
  return (
    <>
      <div className='zzj_workbenches_big_div'>
        <div className='zzj_workbenches_content_div'>
          <div className='zzj_workbenches_content_div_top'>
            <span>👏</span>
            &nbsp;
            <div className='zzj_workbenches_top_name_div'>
              <span>早上好！</span>
              <span>朱子健</span>
            </div>
          </div>
          <div className="zzj_workbenches_show_data_div">
            <div className='zzj_workbenches_div1'>
              <div className='zzj_workbenches_div1_left'>
                <span style={{ fontSize: '0.4rem', color: 'rgb(180, 180, 180)' }}>新增用户数量</span>
                <h1>1080</h1>
                <p>
                  较上周
                  <span style={{ fontSize: '0.4rem', color: '#3ed4a7' }}>+20%</span>
                </p>
              </div>
              <div className='zzj_workbenches_div1_right'>
                <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u995.svg" alt="" />
              </div>
            </div>

            <div className='zzj_workbenches_div1'>
              <div className='zzj_workbenches_div1_left'>
                <span style={{ fontSize: '0.4rem', color: 'rgb(180, 180, 180)' }}>新增工单数量</span>
                <h1>3400</h1>
                <p>
                  较上周
                  <span style={{ fontSize: '0.4rem', color: '#3ed4a7' }}>+30%</span>
                </p>
              </div>
              <div className='zzj_workbenches_div1_right'>
                <img src="/img/趋势表1.png" alt="" />
              </div>
            </div>

            <div className='zzj_workbenches_div1'>
              <div className='zzj_workbenches_div1_left'>
                <span style={{ fontSize: '0.4rem', color: 'rgb(180, 180, 180)' }}>新增订单数量</span>
                <h1>300</h1>
                <p> 较上周
                  <span style={{ fontSize: '0.4rem', color: 'red' }}>-30%</span>
                </p>
              </div>
              <div className='zzj_workbenches_div1_right'>
                <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1013.svg" alt="" />
         
                      </div>
            </div>

            <div className='zzj_workbenches_div1'>
              <div className='zzj_workbenches_div1_left'>
                <span style={{ fontSize: '0.4rem', color: 'rgb(180, 180, 180)' }}>新增动态数量</span>
                <h1>8890</h1>
                <p>
                  较上周
                  <span style={{ fontSize: '0.4rem', color: '#3ed4a7' }}>+38%</span>
                </p>
              </div>
              <div className='zzj_workbenches_div1_right'>
                <img src="/img/趋势表2.png" alt="" />
              </div>
            </div>
          </div>


          <div className="zzj_workbenches_show_div">
            <div className='zzj_workbenches_div2'>
              {/* 快捷入口盒子 */}
              <div className='zzj_workbenches_div2_top_div'>
                <div className='zzj_workbenches_div2_top_title_div'>
                  <div className='zzj_workbenches_div2_top_title_div_main'></div>
                  <span>快捷入口</span>
                </div>
                <img src="/img/设置.png" alt="" />
              </div>
              {/* 图标盒子 */}
              <div className="zzj_workbenches_div2_icon_div">
                <div className='zzj_workbenches_div2_icon'>
                  <div className='zzj_workbenches_div2_icon_div_div' onClick={navigate(``)}>
                    <div className='green_div' onClick={navigate(``)}>
                      <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u941.svg" alt="" />
                    </div>
                    <p>全部用户</p>
                  </div>
                </div>
                <div className='zzj_workbenches_div2_icon'>
                  <div className='zzj_workbenches_div2_icon_div_div' onClick={navigate(``)}>
                    <div className='yellow_div' >
                      <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u945.svg" alt="" />
                    </div>
                    <p>报告管理</p>
                  </div>
                </div>
                <div className='zzj_workbenches_div2_icon'>
                  <div className='zzj_workbenches_div2_icon_div_div' onClick={navigate(``)}>
                    <div className='red_div'>
                      <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u949.svg" alt="" />
                    </div>
                    <p>会话</p>
                  </div>
                </div>
                <div className='zzj_workbenches_div2_icon'>
                  <div className='zzj_workbenches_div2_icon_div_div' onClick={navigate(``)}>
                    <div className='purple_div'>
                      <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u953.svg" alt="" />
                    </div>
                    <p>全部订单</p>
                  </div>
                </div>
                <div className='zzj_workbenches_div2_icon'>
                  <div className='zzj_workbenches_div2_icon_div_div' onClick={navigate(``)}>
                    <div className='purple_div'>
                      <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u957.svg" alt="" />
                    </div>
                    <p>工单管理</p>
                  </div>
                </div>
                <div className='zzj_workbenches_div2_icon'>
                  <div className='zzj_workbenches_div2_icon_div_div' onClick={navigate(``)}>
                    <div className='green_div'>
                      <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u961.svg" alt="" />
                    </div>
                    <p>审核管理</p>
                  </div>
                </div>
                <div className='zzj_workbenches_div2_icon'>
                  <div className='zzj_workbenches_div2_icon_div_div' onClick={navigate(``)}>
                    <div className='yellow_div'>
                      <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u965.svg" alt="" />
                    </div>
                    <p>售后管理</p>
                  </div>
                </div>
                <div className='zzj_workbenches_div2_icon'>
                  <div className='zzj_workbenches_div2_icon_div_div' onClick={navigate(``)}>
                    <div className='red_div'>
                      <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u969.svg" alt="" />
                    </div>
                    <p>动态管理</p>
                  </div>
                </div>
              </div>
            </div>
            {/* 用户标签分布图 */}
            <div className='zzj_workbenches_div2'>
              {/* 用户标签分布图盒子 */}
              <div className='zzj_workbenches_div2_top_div'>
                <div className='zzj_workbenches_div2_top_title_div'>
                  <div className='zzj_workbenches_div2_top_title_div_main'></div>
                  <span>用户标签分布</span>
                </div>

              </div>
              <div className='zzj_sum_div'>
                {data.map((item, index) => (
                  <ProgressBar key={index} {...item} />
                ))}
              </div>
            </div>
            {/* 各服务类型商品订单量占比 */}
            <div className='zzj_workbenches_div2'>
              {/* 各服务类型商品订单量占比盒子 */}
              <div className='zzj_workbenches_div2_top_div'>
                <div className='zzj_workbenches_div2_top_title_div'>
                  <div className='zzj_workbenches_div2_top_title_div_main'></div>
                  <span>各服务类型商品订单量占比</span>
                </div>
              </div>
              <div className="pie-container">
                <Pie />
              </div>
            </div>
          </div>

          {/* echarts盒子 */}
          <div className="zzj_workbenches_echarts_div">
            {/* 用户趋势统计盒子 */}
            <div className='zzj_workbenches_flex_div2_top_div'>
              <div className='zzj_workbenches_div2_top_title_div'>
                <div className='zzj_workbenches_div2_top_title_div_main'></div>
                <span>用户趋势统计</span>
              </div>
            </div>
            <div className="curve-container">
              <Curve />
            </div>
          </div>
          {/* 排行盒子 */}
          <div className='zzj_workbenches_sort_div'>
            <div className='zzj_workbenches_sort_div_left'>
              {/* 支付榜TOP5商品排行 */}
              <div className='zzj_workbenches_div2_top_div'>
                <div className='zzj_workbenches_div2_top_title_div'>
                  <div className='zzj_workbenches_div2_top_title_div_main'></div>
                  <span>支付榜TOP5商品排行</span>
                </div>
              </div>

            </div>
            <div className='zzj_workbenches_sort_div_right'>
              {/* 服务人员业绩TOP5排行 */}
              <div className='zzj_workbenches_div2_top_div'>
                <div className='zzj_workbenches_div2_top_title_div'>
                  <div className='zzj_workbenches_div2_top_title_div_main'></div>
                  <span>服务人员业绩TOP5排行</span>
                </div>
              </div>

            </div>
          </div>
          {/* 标注盒子 */}
          <div className='zzj_workbenches_label_div'>
            <p>Copyright © DaisyAxure All Rights Reserved</p>
          </div>
        </div>
      </div>
    </>
  )
}